<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>105-布局-综合练习.html</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		.container{
			width: 800px;
			margin-left: auto;
			margin-right: auto;
		}
		header{
			position: fixed;
			left: 50%;
			top: 40px;
			width: 800px;
			margin-left: -400px;
			background-color: gray;
			z-index: 999;
		}
		header ul li{
			float: left;
			width: 160px;
			height: 50px;
			line-height: 50px;
			text-align: center;
		}
		header ul li:nth-child(3){
			background-color: red;
			position: relative;
		}
		header ul li:nth-child(3) img{
			position: absolute;
			top: -18px;
			left: 60px;
		}
		.carousel{
			height: 400px;
			margin-top: 120px;
			position: relative;
		}
		.carousel img{
			width: 100%;
			height: 100%;
		}
		.carousel .arrow{
			display: inline-block;
			position: absolute;
			top: 50% ;
			margin-top: -40px;
			width: 40px;
			height: 80px;
			line-height: 80px;
			background-color: rgba(0,0,0,0.6);
			font-size: 30px;
			color: #fff;
			text-align: center;
			cursor: pointer;
		}
		.carousel .arrow:hover{
			background-color: rgba(0,0,0,0.9);
		}
		.carousel .left-arrow{
			left: 0;
		}
		.carousel .right-arrow{
			right: 0;
		}
		.carousel .btns{
			position: absolute;
			right: 10px;
			bottom: 10px;
			width: 200px;
			height: 30px;
		}
		.carousel .btns li{
			float: left;
			width: 30px;
			height: 30px;
			line-height: 30px;
			margin-right: 10px;
			background-color: #999;
			text-align: center;
			color: #fff;
			border-radius: 50%;
			cursor: pointer;
		}
		.content{
			height: 2000px;
			background-color: green;
			margin-top: 20px;
		}
		.ad{
			position: fixed;
			top: 50%;
			margin-top: -50px;
			width: 60px;
			height: 100px;
			background-color: red;
		}
		.left-ad{
			left: 0;
		}
		.right-ad{
			right: 0;
		}
		.back-top{
			position: fixed;
			right: 0;
			bottom: 0;
			width: 100px;
			height: 100px;
			line-height: 100px;
			font-size: 20px;
			color: #fff;
			text-align: center;
			text-decoration: none;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<header>
		<ul>
			<li>导航1</li>
			<li>导航2</li>
			<li>
			导航3 <img src="" alt="">
			</li>
			<li>导航4</li>
			<li>导航5</li>
		</ul>
	</header>
	<section class="carousel container">
		<img src="../photo/fj1.jpeg" alt="">
		<span class="arrow left-arrow">&lt;</span>
		<span class="arrow right-arrow">&gt;</span>
		<ul class="btns">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</section>
	<section class="content container"></section>
	<div class="ad left-ad"></div>
	<div class="ad right-ad"></div>
	<a class="back-top" href="#">返回顶部</a>
</body>
</html>